<template>
    <div style="margin-left: auto">
      <p>开票核算表</p>
    </div>
  
    <div style="right: auto">
    <span style="float: right">
      <el-button type="primary" @click="updPurchaseInvoice">编辑</el-button>
      <el-button type="Default" @click="">取消</el-button>
      <el-button
        style="
          background-color: aquamarine;
          border-color: aquamarine;
          color: white;
        "
        @click=""
        >审核</el-button
      >
      <el-button type="info" @click="">反审核</el-button>
      <el-button type="success" @click="printInvoice">打印</el-button>
    </span>
  </div>
  
    <hr />
    <el-scrollbar style="height: 320px; color: dimgray">
      <div class="scrollbar-flex-content">
        <p class="scrollbar-demo-item">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="单据编码：" style="width: 308px" disabled="true">
              <el-input v-model="form.documentsnumber" placeholder="" disabled="true" />
            </el-form-item>
  
            <el-form-item label="单据日期：" style="width: 308px">
              <el-date-picker v-model="form.documentsDate" type="date" />
            </el-form-item>
  
            <el-form-item label="单据状态：" style="width: 308px">
              <el-select v-model="form.documentstatus" disabled="true">
                  <el-option label="开立" value="开立" />
                   <el-option label="审核" value="审核" />
                   <el-option label="返回" value="返回" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="业务状态：" style="width: 308px" >
              <el-select v-model="form.businessstateId" disabled="true">
                <el-option label="正常" value="正常" />
                <el-option label="非正常" value="非正常" />
              </el-select>
            </el-form-item>
          </el-form>

  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="业务类型：" style="width: 308px">
              <el-select v-model="form.businessTypeId">
                <el-option label="销售订单" value="销售订单" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="操作员：" style="width: 308px">
              <el-input v-model="form.operator" disabled="true" />
            </el-form-item>
  
            <el-form-item label="审核员：" style="width: 308px">
              <el-input v-model="form.auditor" disabled="true" />
            </el-form-item>
  
            <el-form-item label="审核日期：" style="width: 308px">
              <el-date-picker v-model="form.auditDate" type="date" disabled="true" />
            </el-form-item>
          </el-form>
  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="客户名称：" style="width: 308px">
              <el-input v-model="form.clientName" /> </el-form-item>
              <el-link type="primary" @click="form1.dialogTableVisible = true">选择</el-link>
  
      
            <el-form-item label="蓝字红字：" style="width: 308px">
              <el-select v-model="form.blueandredId">
                <el-option label="蓝字" value="蓝字" />
                <el-option label="红字" value="红字" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="税率：" style="width: 308px">
              <el-select v-model="form.rateId">
                <el-option label="13%" value="13%" />
                <el-option label="9%" value="9%" />
                <el-option label="17%" value="17" />
                <el-option label="无" value="无" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="发票类型：" style="width: 308px">
              <el-select v-model="form.invoiceTypeId">
                <el-option label="增值税专用发票" value="增值税专用发票" />
                <el-option
                  label="增值税电子专用发票"
                  value="增值税电子专用发票"
                />
                <el-option label="增值税普通发票" value="增值税普通发票" />
                <el-option
                  label="增值税电子普通发票"
                  value="增值税电子普通发票"
                />
                <el-option label="通行费发票" value="通行费发票" />
                <el-option
                  label="机动车销售统一发票"
                  value="机动车销售统一发票"
                />
                <el-option
                  label="二手车销售统一发票"
                  value="二手车销售统一发票"
                />
                <el-option
                  label="数电票(增值税专用发票)"
                  value="数电票(增值税专用发票)"
                />
                <el-option label="数电票(普通发票)" value="数电票(普通发票)" />
                <el-option
                  label="数电纸质发票(增值税专用发票)"
                  value="数电纸质发票(增值税专用发票)"
                />
                <el-option
                  label="数电纸质发票(普通发票)"
                  value="数电纸质发票(普通发票)"
                />
                <el-option
                  label="数电票(机动车销售统一发票)"
                  value="数电票(机动车销售统一发票)"
                />
                <el-option
                  label="数电票(二手车销售统一发票)"
                  value="数电票(二手车销售统一发票)"
                />
                <el-option
                  label="数电票(铁路电子客票)"
                  value="数电票(铁路电子客票)"
                />
                <el-option
                  label="航空运输电子客票行程单"
                  value="航空运输电子客票行程单"
                />
              </el-select>
            </el-form-item>
          </el-form>
  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="开户行：" style="width: 308px">
              <el-input v-model="form.bank" />
            </el-form-item>
  
            <el-form-item label="账号：" style="width: 308px">
              <el-input v-model="form.account" />
            </el-form-item>
  
            <el-form-item label="税号：" style="width: 308px">
              <el-input v-model="form.rateNumber" />
            </el-form-item>
  
            <el-form-item label="地址电话：" style="width: 308px">
              <el-input v-model="form.addresstelephone" />
            </el-form-item>
          </el-form>
  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="交付邮箱：" style="width: 308px">
              <el-input v-model="form.deliverymailbox" />
            </el-form-item>
  
            <el-form-item label="备注信息：" style="width: 308px">
              <el-input v-model="form.beiZ" />
            </el-form-item>
          </el-form>
        </p>
      </div>
    </el-scrollbar>
  

    <table style="border-collapse: collapse">
      <tr>
        <td>序号</td>
        <td>销售订单号</td>
        <td>单据编码</td>
        <td>物料编码</td>
        <td>物料名称</td>
        <td>型号规格</td>
        <td>主计量</td>
        <td>开票名称</td>
        <td>开票数量</td>
        <td>开票单价</td>
        <td>开票金额</td>
        <td>备注</td>
      </tr>
      <tr>
        <td>
          {{ form.billingmaterialId }}
        </td>
        <td>
          {{ form.saleordersNumber }}
        </td>
        <td>
          {{ form.documentencoding }}
        </td>
        <td>
          {{ form.itemBianma }}
        </td>
        
        <td>
          {{ form.materialName }}
        </td>
        <td>
          {{ form.specifications }}
        </td>
  
        <td>
          {{ form.measurenum }}
        </td>
        <td>
          {{ form.billingName }}
        </td>
        <!-- 开票数量 -->
        <td>
          <el-input v-model="form.billingNumber" disabled="true" style="width: 100px">
          </el-input>
        </td>
        <!-- 开票单价 --> 
        <td>
          <el-input v-model="form.billingPrice" disabled="true" style="width: 100px">
          </el-input>
        </td>
        <!-- 开票总金额 --> 
        <td>
          <el-input v-model="form.billingSum" style="width: 100px">
          </el-input>
        </td>
  
        <td>
          <el-input v-model="form.remark" style="width: 100px">
          </el-input>
        </td>
      </tr>
    </table>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted, computed } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import { useRoute } from "vue-router";
  import Cookie from "cookies-ts";
  import axios from "axios";
  import { number } from "echarts";
  const cookie = new Cookie();
  const router = useRouter();
  const route = useRoute();
  import { hiPrintPlugin } from 'vue-plugin-hiprint'
hiPrintPlugin.disAutoConnect()
import wdmb from './BillePrint.json'
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020


  const form1 = reactive({
    //客户弹出层
    dialogTableVisible: false,
    //物料弹出层
    dialogTableVisible111: false
  });
  onMounted(() => {
   GetIntail()

  });
  

  // 开票通知单表单
  const form = reactive({
    documentsnumber:"",//单据编号
    documentsDate:"",//单据日期
    documentstatus:"",//单据状态
    businessstateId:"",//业务状态
    businessTypeId:"",//业务类型
    operator:"",//     操作员 审核员
    clientName:"",//客户名称
    blueandredId:"",//蓝字红字
    rateId: "",//税率
    invoiceTypeId:"",//发票类型
    bank:"",//开户银行
    account:"",//账号
    rateNumber:"",//税号
    addresstelephone:"",//地址电话
    deliverymailbox:"",//交货邮箱
    beiZ:"",//备注
    auditor:"李四",//审核员
    auditDate:new Date(),//审核日期,
    billingmaterialId:"",
    saleordersNumber:"",//销售订单号
    documentencoding:"",//单据编码
    itemBianma:"",//物料编码
    materialName:"",//物料名称
    specifications:"",//型号规格
    measurenum:"",//主计量
    billingName:"",//开票名称
    billingNumber:"",//开票数量
    billingPrice:"",//开票单价
    billingSum:"",//开票金额
    remark:""//备注
  });
  let aa = {};
  const GetIntail = () => {
    axios.get(epiurls+'/api/BilleInvoice/FanTBilleInvoice', {
        params: {
            documentsnumber: route.query.documentsnumber,
            itemName: '',
            salesStaff: '',
            customerProfileName: '',
            salesType: '',
            pageIndex: 1,
            pageSize: 10,
        }
    }).then((res) => {
        aa=res.data.data.list
        console.log(res.data.data.list,22222222225)
        form.documentsnumber = res.data.data.list[0].documentsnumber
        form.documentsDate = res.data.data.list[0].documentsDate
        form.documentstatus = res.data.data.list[0].documentstatus
        form.businessstateId = res.data.data.list[0].businessstateId
        form.businessTypeId = res.data.data.list[0].businessTypeId
        form.operator = res.data.data.list[0].operator
        form.clientName = res.data.data.list[0].clientName
        form.blueandredId = res.data.data.list[0].blueandredId
        form.rateId = res.data.data.list[0].rateId
        form.invoiceTypeId = res.data.data.list[0].invoiceTypeId
        form.bank = res.data.data.list[0].bank
        form.account = res.data.data.list[0].account
        form.rateNumber = res.data.data.list[0].rateNumber
        form.addresstelephone = res.data.data.list[0].addresstelephone
        form.deliverymailbox = res.data.data.list[0].deliverymailbox
        form.beiZ = res.data.data.list[0].beiZ
        form.billingmaterialId = res.data.data.list[0].billingmaterialId
        form.saleordersNumber = res.data.data.list[0].saleordersNumber
        form.documentencoding = res.data.data.list[0].documentencoding
        form.itemBianma = res.data.data.list[0].itemBianma
        form.materialName = res.data.data.list[0].materialName
        form.specifications = res.data.data.list[0].specifications
        form.measurenum = res.data.data.list[0].measurenum
        form.billingName = res.data.data.list[0].billingName
        form.billingNumber = res.data.data.list[0].billingNumber
        form.billingPrice = res.data.data.list[0].billingPrice
        form.billingSum = res.data.data.list[0].billingSum
        form.remark = res.data.data.list[0].remark
        
    })
}

//打印
const printInvoice =()=>{
  location.href=epiurls+'/api/BillNoicePrint/GetPDF?id='+route.query.documentsnumber;
}


//编辑
const updPurchaseInvoice = () => {
  let request: any = ref([{
    purchaseReturnOrderSubtableId: 0,
    copyNo: '',
    materialNo:'',
    materialName:'',
    lotNumber:'',
    num: 0,
    outboundShipmentsNum: 0,
    returnInstructions: 0,
    purchaseReturnOrderSerialNumber:''
  }]);
  console.log(request);
  var datas = {
 
  };

  axios
    .post(
      fpiurls+'/api/SalesManagementWrite/PurchaseReturnOrderUpdate',datas)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success(res.data.msg);
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};


  </script>
  
  <style scoped>
  .scrollbar-flex-content {
    display: flex;
  }
  
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1800px;
    height: 300px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
  }
  </style>
  <style scoped>
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
  
  /* 设置第一行的 td 顶部边框加粗并设置为红色 */
  table tr:first-child td {
    border-top: 1px solid #ccc;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
  }
  
  /* 设置 td 的样式 */
  
  table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
  }
  
  /* 可选：为 table 添加样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  
  /*______________________________________________________*/
  
  .table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
  }
  
  /* :deep(.el-input__wrapper) {
      box-shadow: none;
      text-align: center;
  }
  
  :deep(.el-select__wrapper) {
      box-shadow: none;
  }
  
  ::v-deep(.center-input .el-input__inner) {
      text-align: center;
  } */
  </style>
  